<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card class="box-card table-wrapper">
          <div slot="header" class="card_header">
            <div>TARGET SETTING</div>
            <div>{{tsStatus}}</div>
            <div class="op">
              <div
                :class="['icon-add icon', isBtnDisabled ? 'icon-add-disabled' : '']"
                @click="addSetting"
              ></div>
              <div class="icon-calendar icon" @click="selectDate"></div>
              <ListSelect
                class="date-select"
                :selectIndex="selectIndex"
                v-show="isShowDateSelect"
                :list="yearList"
                @confirmIndex="confirmIndex"
              />
            </div>
          </div>
          <el-table
            ref="table1"
            :data="tableData"
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column label="NAME">
              <template slot-scope="scope">
                <div class="target-name">
                  <div>{{scope.row.name}}</div>
                  <div class="opacity"></div>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="70px" label="weight">
              <template slot-scope="scope">
                <div>{{scope.row.weight}}%</div>
              </template>
            </el-table-column>
            <el-table-column width="70px" label="OP">
              <template slot-scope="scope">
                <div class="delete" @click.stop="deleteTarget(scope.row)">delete</div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12"></el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
import ListSelect from "@/components/ListSelect";
export default {
  components: {
    ListSelect
  },
  data() {
    return {
      isBtnDisabled: false,
      isShowDateSelect: false,
      from: new Date().getFullYear(),
      to: new Date().getFullYear() + 1,
      selectIndex: 0,
      tableData:[]
    };
  },
  computed: {
    ...mapState("allState", {
      yearList: s => {
        return s.yearList;
      }
    }),
    tsStatus() {
      return `${this.to} STATUS: Not Started`;
    }
  },
  mounted() {
    this.initYear();
  },
  methods: {
    addSetting() {},
    selectDate() {
      this.isShowDateSelect = true;
    },
    confirmIndex(index) {
      this.isShowDateSelect = false;
      this.to = this.yearList[index];
    },
    initYear() {
      this.from = this.yearList[0];
      this.to = new Number(this.from) + 1;
      console.log(this.to);
    }
  }
};
</script>

<style lang="scss" scoped>
.card_header {
  display: flex;
  justify-content: space-between;
  align-content: center;
  font-weight: bold;
  .op {
    display: flex;
    margin-top: -8px;
    position: relative;
  }
  .icon {
    width: 32px;
    height: 32px;
    cursor: pointer;
  }
  .icon-add {
    background: url("../../assets/images/icon-add.png") 0 0 no-repeat;
    background-size: contain;
    margin-right: 16px;
    &.icon-add-disabled {
      background: url("../../assets/images/icon-add-disable.png") 0 0 no-repeat;
      background-size: contain;
    }
  }
  .icon-calendar {
    background: url("../../assets/images/icon-calendar.png") 0 0 no-repeat;
    background-size: contain;
  }

  .date-select {
    position: absolute;
    top: 38px;
    right: 0;
    z-index: 9999;
  }
}
</style>